<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" href="../css/main.css"/>
    <link rel="stylesheet" href="../css/shop_cart.css"/>
    <script type="text/javascript" src="../js/base.js"></script>

    <style>
        .aui-bar-btn-item {
            width: 1.8rem;
        }
        @media screen and (max-width:320px){
       .gdName{  font-size:0.5rem; color:#000 }
        .goodsType{  width:4.5rem;overflow: hidden;white-space:nowrap;text-overflow: ellipsis; }
        }

        @media screen and (min-width:321px) and (max-width:376px){
            .gdName{ font-size:1rem; color:#000}
        }
        @media screen and (min-width:377px) and (max-width:415px){
            .gdName{ font-size:1rem; color:#000}
        }

    </style>
</head>
<body>
<!--<header class="aui-bar aui-bar-nav aui-bar-top">-->
    <!--<a class="aui-pull-left aui-btn go-back" >-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <!--<div class="aui-title">购物车</div>-->
<!--</header>-->
<section id="app" v-cloak>
    <div v-if="goodsList">
        <ul class="aui-list aui-media-list" style="margin-bottom:8rem">
            <li class="aui-list-item aui-margin-l-0"  v-for="goods,index in goodsList" >
                <div class="aui-media-list-item-inner aui-swipe-handle" v-bind:id="'goods-'+index">
                    <div class="aui-list-item-media" v-on:click="checkItem(index)">
                        <label class="check-radio aui-margin-r-10"><input class="aui-radio" type="radio"  v-bind:checked="goods.is_checkT" > </label>
                        <span class="aui-hide">{{goods.is_checkT?canToPay=true:''}} {{!goods.is_checkT?isAllChoseGoods=false:''}}</span>
                        <img v-bind:src="imgBaseUrl+goods.thumb_img" style="border: 1px solid #efefef;border-radius: 0.3rem">
                        <div v-if="goods.refere_name" class="aui-font-size-14 textCol" style="width:9rem;position:absolute;top:4.5rem;left:0.5rem;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;">推荐人:{{goods.refere_name}}</div>
                        <div v-if="!goods.refere_name" class="aui-font-size-14 textCol" style="width:9rem;position:absolute;top:4.5rem;left:0.5rem;"></div>
                    </div>

                    <div class="aui-list-item-inner aui-padded-l-15" style="margin-left: 1.2rem">
                        <div class="aui-list-item-text ">
                            <div class="gdName goodsType  aui-list-item-title">
                                {{goods.goods_name}}
                            </div>
                            <div class="aui-list-item-right aui-font-size-14" style="color:#000">￥{{goods.shop_price*goods.goods_number}}元</div>
                        </div>
                        <div class="aui-list-item-text">
                            <div v-if="!goods.attrValueGoods[0]"></div>
                           <div v-else class="goodsType  aui-font-size-14"  style="color:#757575">型号:{{goods.attrValueGoods[0]}}</div>
                            <div class="aui-list-item-right aui-font-size-14" style="text-decoration:line-through;">￥{{goods.market_price*goods.goods_number}}元</div>
                        </div>
                        <div class="aui-list-item-text">
                            <div v-if="!goods.attrValueGoods[1]"></div>
                            <div v-else class="goodsType aui-list-item-text aui-font-size-14"> 颜色:{{goods.attrValueGoods[1]}}</div>
                            <div>
                                <div class="aui-bar aui-bar-btn aui-margin-t-10"   type="count">
                                    <div class="aui-bar-btn-item aui-font-size-14"  style="border-color:#9e9e9e;background-color: #eee" v-on:click="muchOrLess(index,-1)">
                                        <i class="aui-iconfont aui-icon-minus"></i>
                                    </div>
                                    <div class="aui-bar-btn-item"  style="border-color:#9e9e9e">
                                        <input type="number" class="aui-input aui-text-center"  v-model="goods.goods_number">
                                    </div>
                                    <div class="aui-bar-btn-item aui-font-size-14"  style="border-color:#9e9e9e;background-color: #eee" v-on:click="muchOrLess(index,1)">
                                        <i class="aui-iconfont aui-icon-plus"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--<div class="aui-grid-label aui-font-size-12 aui-text-danger aui-margin-0"><img src="../icon/2-1/fenxiang.png" style="height:0.5rem"></div>-->

                    </div>

                </div>

                <div class="aui-swipe-btn">
                    <!--<div class="aui-btn aui-btn-info" v-on:click="closeDelete(index)">关闭</div>-->
                    <div class="aui-btn aui-btn-danger" v-on:click="deleteGoods(index)">删除</div>
                </div>
            </li>
        </ul>
    </div>
    <div v-if="goodsList==0 && navigator && navigator.onLine === true" class="shopCartEmpty" v-on:click="goHome()">
        <div><img src="../icon/kong.png" alt=""></div>
        <div>购物车暂无商品,点击回首页</div>
    </div>

    <div  class="aui-flex-item-12 jiesuan" v-if="goodsList.length> 0">
          <ul class="aui-flex-col">
              <li class="aui-flex-item-3 aui-padded-l-15" v-on:click="isAllChose()">
                  <input class="aui-radio" type="radio" v-bind:checked="isAllChoseGoods">
                  <span>全选</span>
              </li>
              <li class="aui-flex-item-5 aui-text-center aui-font-size-20 textColor">合计:{{countMoney}}元</li>
              <li class="aui-flex-item-4 aui-bg-info" v-on:click="goBuy">
                  <!--<input class="aui-btn aui-btn-info  btnCount" type="button" value="结算">-->
                  <p><div class="aui-btn aui-btn-info aui-btn-block" style="border-radius: 0">结算</div></p>
              </li>
          </ul>
    </div>

    <div v-if="navigator && navigator.onLine === false" style="position:relative;" @click="goOnLine()">
        <div style="position:absolute;top:50%;left:50%;margin-top:0rem;margin-left: -3rem">
            <img src="../icon/duanwang.png" alt="" style="width:6rem">
            <div class="aui-text-center aui-margin-t-15">暂无网络</div>
        </div>

       <div  class="aui-text-center textCol" style="position:absolute;top:50%;left:50%;margin-top:8rem;margin-left: -86px">请连接网络后,点击刷新</div>
    </div>
</section>
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item"  >
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">首页</div>
    </div>
    <div class="aui-bar-tab-item aui-active">
        <i class="aui-iconfont aui-icon-cart"></i>
        <div class="aui-bar-tab-label">购物车</div>
    </div>
    <div class="aui-bar-tab-item" >
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">个人中心</div>
    </div>
</footer>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/aui-tab.js"></script>
<script type="text/javascript" src="../js/aui-list-swipe.js"></script>
<script type="text/javascript" src="../js/aui-toast.js"></script>
<script type="text/javascript" src="../js/aui-toast.js"></script>
<script type="text/javascript" src="../js/shop_cart.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../js/weixin.js" ></script>
</body>
</html>